<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
</head>
<style>
    .layui-table-page {
        text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<!--表格功能-->
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="search">
        <i class="layui-icon">&#xe615;</i>查看周报
    </a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe60a;</i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
</script>

<!--搜索栏-->
<div>
    <div class="layui-form-item" style="margin-bottom: -5px">
        <label class="layui-form-label" style="width: 90px">周报日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="stime" autocomplete="off">
        </div>
        <button type="button" id="cz" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 4px"><i class="layui-icon" style="font-size: 14px;">&#xe615;</i> 搜索</button>
        <button id="add" class="layui-btn layui-btn-sm" style="margin-top: 4px"><i class="fa fa-plus"></i> 新增</button>
    </div>
</div>

<div class="utable">
    <table class="layui-table" id="demo" lay-filter="demo"></table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use('table', function () {
        var table = layui.table;

        //方法渲染
        table.render({
            elem: '#demo',
            id: 'tab',
            width:1270,
            height:500,
            url: '/workdiary/myworkdiarydata',
            page: true,
            toolbar: '#toolbarDemo',
            cols:[[
                {field: 'worklogid', title: '编号', width:80},
                {field:'emp_Name', width:90, title: '员工名称'},
                {field: 'Workday', title: '填写日期',width:120},
                {field:'weekCur', title: '本周情况描述'},
                {field:'studentQuestion',title: '问题学生情况反馈'},
                {field:'Idea', title: '意见建议'},
                {field:'weekNext',title: '下周工作计划'},
                {field: 'checkstate',width:100, title: '审核状态', templet: aaa},
                {fixed: 'right', title: '操作', toolbar: '#bar',width: 250}
            ]]
        });

        //查看周报
        function search(id) {
            layer.open({
                type: 2,
                title: '查看周报',
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content: '/workdiary/searchwork?worklogid='+id//这是链接你的页面地址 url
            })
        }

        //编辑周报
        function edit(id) {
            layer.open({
                type: 2,
                title: '编辑周报',
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content: '/workdiary/toeditwork?worklogid='+id//这是链接你的页面地址 url
            })
        }


        $("#add").on('click',function(){
            layer.open({
                type: 2,
                title: '添加周报',
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content: ['/workdiary/toaddwork']//这是链接你的页面地址 url
            });
        });



        //监听行工具事件
        table.on('tool(demo)', function (obj) {

            var data = obj.data;
            var id = data.worklogid;
            if (obj.event === 'search') {
                search(id);
            }else if(obj.event === 'edit'){
                edit(id);
            }else if(obj.event === 'del'){
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/workdiary/delworkdiary',
                        type: 'post',
                        data: {
                            id:data.worklogid
                        },
                        dataType: 'text'
                    })
                });
            }
        });


        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //日期范围
            laydate.render({
                elem: '#stime',
                trigger: 'click', //采用click弹出
                range: true,
                done: function (value,date,endDate) {
                }
            });

            $("#cz").on('click',function(){

                var stime=$("#stime").val();
                table.reload('tab', {
                    where: { //设定异步数据接口的额外参数，任意设
                        stime:stime
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
        });

        //审批状态
        function aaa(data){
            var status = data.checkstate;
            var btns = "";
            if (status == 1) {
                btns += '<span style="color:rgb(255,184,0)">待审核</span>';
            }
            if (status == 2) {
                btns += '<span style="color:green">已通过</span>';
            }
            if (status == 3) {
                btns += '<span style="color:red">未通过</span>';
            }
            return btns;
        }
    });
</script>
</html>